<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="work1.js"></script>
    <script>
        var proObj = null;
        window.onload = function () {
            proObj = document.getElementById("province");
            var prostr = "<option value=''>请选择省份</option>";
            for(var i = 0; i < provinceArray.length; i++){
                var obj = provinceArray[i];
                prostr += `<option value=${obj.id}>${obj.name}</option>`
            }
            proObj.innerHTML = prostr;

            proObj.onchange = function () {
                choice(this.value);
            }
        }

        function choice(provinceId) {
            var citObj = document.getElementById("cities");
            var citystr = "";
            for(var i = 0; i < cityArray.length; i++){
                var cityObj = cityArray[i];
                if(provinceId == cityObj.proId){
                    citystr += `<option value=${cityObj.id}>${cityObj.name}</option>`
                }
            }
            citObj.innerHTML = citystr;
        }
    </script>
</head>
<body>
    <select id="province"></select>
    <select id="cities"></select>
</body>
</html>